<template>
  <div class="about">
    <h1>{{person.name}}</h1>
    <h1>{{person.age}}</h1>
    <h1>{{person.type}}</h1>
    <p>{{str}}</p>
    <!-- <h1>{{arr}}</h1>
    <p>{{person.type.a}}</p> -->
  </div>
</template>
<script>
import {reactive,toRefs,toRef} from 'vue'
export default {
    setup(props) {
       const data = reactive({
         arr:[1,2,3,4,5,6],
         person:{
            name:'羊了个羊',
            age:0,
            type:{
               a:'好玩',
               b:'折磨人' 
            }
         },
         num:1,
         str:'vue3',
         flag:false

       })
       console.log(data);
    //    toRefs可以把proxy对象变成普通对象
       console.log(toRefs(data));
    //    return {name:toRef(data.person,'name'),age:toRef(data.person,'age'),type:toRef(data.person,'type')}
    return {...toRefs(data)}

    }
}
</script>
